<template>
  <div>
    <!-- 页面结构标签 -->
    <el-container>
      <!-- 导航栏部分 -->
      <el-header>
        <div style="background-color: rgb(84, 92, 100)">
          <el-menu
            :default-active="topName"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            style="height: 60px; max-width: 1180px; margin: 0 auto"
          >
            <!-- 首页按钮 -->
            <el-menu-item index="home" v-on:click="home">首页</el-menu-item>
            <!-- 时事新闻按钮 -->
            <!-- <el-menu-item index="news" v-on:click="news">时事新闻</el-menu-item> -->
            <!-- 动物摄影按钮 -->
            <el-menu-item index="photography" v-on:click="photography"
              >动物摄影</el-menu-item
            >
            <!-- 家宠领养驿站按钮 -->
            <el-menu-item index="adopt" v-on:click="adopt"
              >家宠领养驿站</el-menu-item
            >
            <!-- 宠物专题按钮 -->
            <el-menu-item index="pet" v-on:click="pet">宠物专题</el-menu-item>
            <div style="float: left; margin-left: 10%">
              <el-row :gutter="20">
                <!-- 搜索框 -->
                <el-input
                  v-model="searchFrom.keywords"
                  size="small"
                  style="width: 260px"
                  placeholder="通过名称、别名搜索..."
                ></el-input>
                <!-- 搜索按钮 -->
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  @click="searchInformationByKeyWord()"
                  >搜索</el-button
                >
              </el-row>
            </div>
            <!-- 个人中心按钮 -->
            <el-menu-item
              @click="selectXiaoxi()"
              type="primary"
              index="personalCenter"
              class="personalCenter"
              >个人中心</el-menu-item
            >
            <!-- 个人中心弹窗 -->
            <div class="gerenzhongxin">
              <el-drawer
                title="个人中心"
                :visible.sync="personalCenterFrom.drawer"
              >
                <!-- 编写个人中心功能按钮 -->
                <el-menu-item index="personalData" v-on:click="personalData"
                  >个人资料</el-menu-item
                >
                <el-menu-item index="collect" @click="petAddPage">宠物专题</el-menu-item>
                  <el-menu-item index="news" v-if="quxain">
                    <el-badge :value="xiaoxiLenght" class="item">
                        <span @click="xiaoxiOpen()">消息</span>
                    </el-badge>
                  </el-menu-item>
                <el-menu-item index="exit" v-on:click="loginout"
                  >退出登录</el-menu-item
                >
              </el-drawer>
            </div>
          </el-menu>
        </div>
      </el-header>
    </el-container>


    <el-dialog
      :visible.sync="dialogVisible"
      width="90%"
      :before-close="handleClose">
      <div>
        <el-tabs v-model="dialogType" type="card">
          <el-tab-pane label="百科审核" name="bk">
            <el-table
              :data="xiaoxiDate1"
              style="width: 100%"
              height="300px"
              :header-row-style="{
                  padding:'5px'
                }">
              <el-table-column
                prop="worksId"
                align="left"
                label="标题">
                <template slot-scope="scope">
                    <span class="oneButton" @click="looklook(scope.row)">
                      {{scope.row.name}}
                    </span>
                </template>
              </el-table-column>
              <el-table-column
                align="left"
                label="操作">
                <template slot-scope="scope">
                  <span class="zjbutton"  @click="passEvent(scope.row,1)">审核通过</span>
                  <span class="zjbutton"  style="color: red" @click="passEvent(scope.row,-1)">审核不通过</span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="账号管理" name="zh">
            <el-table
              :data="xiaoxiDate2"
              style="width: 100%"
              :header-row-style="{
                  padding:'5px'
                }">
              <el-table-column
                prop="worksId"
                align="left"
                label="标题">
                <template slot-scope="scope">
                    <span class="oneButton">
                      {{scope.row.name}}
                    </span>
                </template>
              </el-table-column>
              <el-table-column
                align="left"
                label="操作">
                <template slot-scope="scope">
                  <span class="zjbutton"  @click="passEvent2(scope.row,1)">审核通过</span>
                  <span class="zjbutton"  style="color: red" @click="passEvent2(scope.row,-1)">审核不通过</span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>

    <el-dialog
      title="详情"
      :visible.sync="dialogVisible2"
      width="90%"
      :before-close="handleClose2">
      <div>
        <el-form :model="dialogData" ref="form" label-width="100px" class="demo-ruleForm">
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="中文名:" prop="name">
                <el-input disabled  placeholder="请输入" v-model="dialogData.name" size="mini"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="别名" prop="bname">
                <el-input disabled placeholder="请输入" v-model="dialogData.bname" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="界:" prop="kingdom">
                <el-input disabled placeholder="请输入" v-model="dialogData.kingdom" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="门:" prop="phylum">
                <el-input disabled placeholder="请输入" v-model="dialogData.phylum" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="亚门:" prop="subPhylum">
                <el-input disabled placeholder="请输入" v-model="dialogData.subPhylum" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="纲" prop="gclass">
                <el-input disabled placeholder="请输入" v-model="dialogData.gclass" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="亚纲" prop="subClass">
                <el-input disabled placeholder="请输入" v-model="dialogData.subClass" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="目" prop="orderA">
                <el-input disabled placeholder="请输入" v-model="dialogData.orderA" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="亚目" prop="subOrder">
                <el-input disabled placeholder="请输入" v-model="dialogData.subOrder" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="科" prop="family">
                <el-input disabled placeholder="请输入" v-model="dialogData.family" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="亚科" prop="subFamily">
                <el-input disabled placeholder="请输入" v-model="dialogData.subFamily" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="属" prop="genus">
                <el-input disabled placeholder="请输入" v-model="dialogData.genus" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="亚属" prop="subGenus">
                <el-input disabled placeholder="请输入" v-model="dialogData.subGenus" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="种" prop="species">
                <el-input disabled placeholder="请输入" v-model="dialogData.species" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="亚种" prop="subSpecies">
                <el-input disabled placeholder="请输入" v-model="dialogData.subSpecies" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="分布区域" prop="distributionArea">
                <el-input disabled placeholder="请输入" v-model="dialogData.distributionArea" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="保护级别" prop="protectionLevel">
                <el-input disabled placeholder="请输入" v-model="dialogData.protectionLevel" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="二名法" prop="binomialNomenclature">
                <el-input disabled placeholder="请输入" v-model="dialogData.binomialNomenclature" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="爱吃食物" prop="food">
                <el-input disabled placeholder="请输入" v-model="dialogData.food" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="寿命" prop="lifeTime">
                <el-input disabled placeholder="请输入" v-model="dialogData.lifeTime" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="繁殖速度" prop="breed">
                <el-input disabled placeholder="请输入" v-model="dialogData.breed" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="对人影响" prop="affect">
                <el-input disabled placeholder="请输入" v-model="dialogData.affect" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="颜色" prop="colour">
                <el-input disabled placeholder="请输入" v-model="dialogData.colour" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="历史" prop="pastRecords">
                <el-input disabled placeholder="请输入" v-model="dialogData.pastRecords" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="天敌" prop="naturalEnemy">
                <el-input disabled placeholder="请输入" v-model="dialogData.naturalEnemy" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="生活习性" prop="lifeHabit">
                <el-input disabled placeholder="请输入"  type="textarea" v-model="dialogData.lifeHabit" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="种群现状" prop="populationStatus">
                <el-input disabled placeholder="请输入"  type="textarea" v-model="dialogData.populationStatus" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="外形特征" prop="feature">
                <el-input disabled placeholder="请输入"  type="textarea" v-model="dialogData.feature" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生长繁殖" prop="growthReproduction">
                <el-input disabled placeholder="请输入"  type="textarea" v-model="dialogData.growthReproduction" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="疾病传播" prop="pathophoresis">
                <el-input disabled placeholder="请输入"  type="textarea" v-model="dialogData.pathophoresis" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-button @click="dialogVisible2 = false" size="mini">取 消</el-button>
      <el-button type="primary" @click="dialogVisible2=false" size="mini">确定</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Top',
  watch: {
    /**
     * 路由监听，处理路由变化
     */
    // $route() {
    //   this.onRouteChange();
    // },
  },
  data () {
    return {
      dialogVisible2:false,
      dialogData:{},
      topName: 'home',
      // 搜索框
      searchFrom: {
        keywords: ''
      },
      // 个人中心
      personalCenterFrom: {
        drawer: false
      },
      xiaoxiDate1:[],
      xiaoxiDate2:[],
      dialogVisible:false,
      dialogType:'bk'
    }
  },
  computed:{
    xiaoxiLenght(){
      let sum1=0,sum2=0
      !this.isEmpty(this.xiaoxiDate1) && (sum1=this.xiaoxiDate1.length)
      !this.isEmpty(this.xiaoxiDate2) && (sum1=this.xiaoxiDate2.length)
      return sum1+sum2
    },
    quxain(){
      let user=JSON.parse( window.localStorage.getItem('userInfo') )
      console.log(user,'user');
      if(user.power===1){
        return true
      }else{
        return false
      }
    }
  },
  methods: {
    petAddPage(){
      this.$router.push({ name: 'PET_ADD' })
    },
    looklook(row){
      this.dialogVisible2=true
      this.dialogData=row
    },
    passEvent(row,type){
      let str=type===1?'是否审核通过该条数据?':'是否审核不通过该条数据'
      this.$confirm(str, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios
          .post('/updateToCoupe', {information:row,validState:type})
          .then(({data}) => {
          this.selectXiaoxi()
            this.$message.success('操作成功！')
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    passEvent2(row,type){
      let str=type===1?'是否审核通过该条数据?':'是否审核不通过该条数据'
      this.$confirm(str, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios
          .post('/auditUser', {information:row,validState:type})
          .then(({data}) => {
            this.selectXiaoxi()
            this.$message.success('操作成功！')
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    handleClose2(){
      this.dialogVisible2=false
      this.dialogData={}
    },
    handleClose(){
      this.dialogType='bk'
      this.dialogVisible=false
    },
    xiaoxiOpen(){
      this.dialogVisible=true
    },
    isEmpty (value) {
      if (typeof value === 'undefined') {
        return true
      } else if (value === null) {
        return true
      } else if (typeof value === 'string' && value === '') {
        return true
      } else if (typeof value === 'number' && isNaN(value)) {
        return true
      } else if (Array.isArray(value) && value.length === 0) {
        return true
      } else if (value instanceof Number && isNaN(value)) {
        return true
      } else if (
        value.toString() === '[object Object]' &&
        Object.keys(value).length === 0
      ) {
        return true
      } else {
        return false
      }
    },
    selectXiaoxi(){
      this.personalCenterFrom.drawer = true
      let user=JSON.parse( window.localStorage.getItem('userInfo') )
      this.$axios
        .post('/toAudit', )
        .then(({data}) => {
          this.xiaoxiDate1=data.data
        })
      this.selectXiaoxi2()
    },
    selectXiaoxi2(){
      let user=JSON.parse( window.localStorage.getItem('userInfo') )
      this.$axios
        .post('/queryUser', )
        .then(({data}) => {
          this.xiaoxiDate2=data.data
        })
    },
    addVue (state, view) {
      let findResult = state.view.find((e) => e.path === view.path)
      findResult.query = view.query
    },
    onRouteChange () {
      let {
        path,
        name,
        meta: { title, cache },
        query
      } = this.$route
      if (path !== '/index') {
        this.ADD_VIEW({
          path,
          name,
          title: this.addVue(path, title),
          cache,
          query,
          changed: false
        })
      }
    },
    // 首页跳转
    home () {
      this.$router.push({ name: 'AppIndex' })
    },
    // 宠物专题跳转
    pet () {
      this.$router.push({ name: 'Pet' })
    },
    // 时事新闻跳转
    // news () {
    //   this.$router.push({name: 'News'})
    // },
    // 动物摄影跳转
    photography () {
      this.$router.push({ name: 'Photography' })
    },
    // 家宠领养驿站跳转
    adopt () {
      this.$router.push({ name: 'Adopt' })
    },
    // 个人中心跳转
    personalData () {
      this.$router.push({ name: 'PersonalCenter' })
    },
    // 搜索按钮请求后端
    searchInformationByKeyWord () {
      var _this = this
      this.$axios
        .post('/search', {
          keywords: this.searchFrom.keywords
        })
        .then((resp) => {
          if (resp && resp.status === 200) {
            _this.information = resp.data
          }
        })
    },
    // 退出登录
    loginout () {
      // 清空sessionStorage
      window.sessionStorage.clear()
      this.$router.push({ name: 'Login' })
    },
    selectData (list) {
      this.$router.push({ name: 'SelectData', query: {list,key:this.searchFrom.keywords} })
    },
    isEmpty (value) {
      if (typeof value === 'undefined') {
        return true
      } else if (value === null) {
        return true
      } else if (typeof value === 'string' && value === '') {
        return true
      } else if (typeof value === 'number' && isNaN(value)) {
        return true
      } else if (Array.isArray(value) && value.length === 0) {
        return true
      } else if (value instanceof Number && isNaN(value)) {
        return true
      } else if (
        value.toString() === '[object Object]' &&
        Object.keys(value).length === 0
      ) {
        return true
      } else {
        return false
      }
    },
    // 搜索按钮请求后端
    searchInformationByKeyWord () {
      if (this.isEmpty(this.searchFrom.keywords)) {
        this.$message.warning('请输入关键词')
        return
      }
      var _this = this
      this.$axios
        .post('/search', {
          keywords: this.searchFrom.keywords
        })
        .then(({data}) => {
          if (this.isEmpty(data.data.list)) {
            this.$message.warning('未查找到该信息！')
            return
          }
          this.selectData(data.data.list)
        })
    },
  }
}
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.personalCenter {
  margin-left: 2%;
}
.gerenzhongxin {
  width: 60%;
}
.el-badge__content.is-fixed {
  top: 19px;
  right: 0px;
}
.zjbutton:hover{
  cursor: pointer;
}
</style>
